<template>
  <!-- 签名管理 -->
  <div class='signature'>
    <!-- 上面盒子 -->
    <div class='top'>
      <!-- 头部 -->
      <div class='head'>
        <span class='blue'></span>
        <span class='pending'>我的签字</span>
      </div>
      <div class='content'>
        <div class='left'>
          <div>
            <img src='../../assets/image/operator.png' alt='' class='img' />
          </div>
          <div class='btn'><span>设为默认</span> <span>删除签名</span></div>
        </div>
        <div class='right'>
          <el-upload
            class='avatar-uploader'
            action='https://jsonplaceholder.typicode.com/posts/'
            :show-file-list='false'
            :on-success='handleAvatarSuccess'
            :before-upload='beforeAvatarUpload'
          >
            <img v-if='imageUrl' :src='imageUrl' class='avatar' />
            <i v-else class='el-icon-plus avatar-uploader-icon'></i>
          </el-upload>
        </div>
      </div>
      <div class='footer'>
        当您作为经办人或者授权代表签署合同时,使用此签名,请确保以上签名与您入场商务合同签名样式一致
      </div>
    </div>
    <!-- 下面盒子 -->
    <div class='bottom'>
      <!-- 头部 -->
       <div class='head'>
        <span class='blue'></span>
        <span class='pending'>企业印章</span>
      </div>
      <!-- 上传企业印章 -->
      <div class="enterprise">
         <el-upload
            class='avatar-uploader'
            action='https://jsonplaceholder.typicode.com/posts/'
            :show-file-list='false'
            :on-success='handleAvatarSuccess'
            :before-upload='beforeAvatarUpload'
          >
            <img v-if='imageUrl' :src='imageUrl' class='avatar' />
            <i v-else class='el-icon-plus avatar-uploader-icon'></i>
          </el-upload>
          <p class="p" >点击上传公章</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageUrl: ''
    }
  },
  methods: {
    // 上传图片并且预览
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped lang='less'>
.signature {
  width: 100%;
  height: 898px;
  background: #ebebeb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .top {
    height: 376px;
    background: white;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    padding-left: 41px;
    .head {
      padding: 15px 0 0 0;
      width: 1391px;
      height: 56px;
      line-height: 20px;
      font-size: 14px;
      border-bottom: 2px solid #e3e3e3;
      .blue {
        width: 20px;
        height: 16px;
        line-height: 20px;
        background-color: rgba(82, 144, 255, 1);
        text-align: center;
        margin-left: 15px;
        border-left: 4px solid rgba(82, 144, 255, 1);
      }
      .pending {
        width: 54px;
        height: 27px;
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        margin-left: 13px;
        font-family: SourceHanSansSC-bold;
      }
    }
    .content {
      display: flex;
      flex-direction: row;
      height: 222px;
      margin-top: 50px;
      .left {
        border: 1px dashed #d9d9d9;
        text-align: center;
        width: 320px;
        height: 160px;
        img{
          width: 100%;
        }
        .btn {
          text-align: center;
          margin-top: 20px;
          :nth-child(1) {
            margin-right: 20px;
          }
        }
      }
      .right{
         border: 1px dashed #d9d9d9;
         width: 320px;
         height: 160px;
         font-size: 45px;
         text-align: center;
         margin-left: 30px;
      }
    }
    .footer {
      // margin-top: 20px;
      height: 35px;
    }
  }
  .bottom {
    height: 376px;
    background: white;
    height: 376px;
    background: white;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    padding-left: 41px;
    .head {
      padding: 15px 0 0 0;
      width: 1391px;
      height: 56px;
      line-height: 20px;
      font-size: 14px;
      border-bottom: 2px solid #e3e3e3;
      .blue {
        width: 20px;
        height: 16px;
        line-height: 20px;
        background-color: rgba(82, 144, 255, 1);
        text-align: center;
        margin-left: 15px;
        border-left: 4px solid rgba(82, 144, 255, 1);
      }
      .pending {
        width: 54px;
        height: 27px;
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        margin-left: 13px;
        font-family: SourceHanSansSC-bold;
      }
    }
    .enterprise{
        margin-top: 20px;
        border: 1px dashed #d9d9d9;
         width: 320px;
         height: 160px;
         font-size: 45px;
         text-align: center;
         .p{
           font-size: 16px;
           margin-top: 20px;
         }
    }
  }
}

 // 上传图片样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 100%;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 45px;
    color: #8c939d;
    text-align: center;
    width: 100%;
    line-height: 160px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
